<!-- 订单详情 -->
<script setup>
import { reactive } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
// 引入通知发货弹窗组件
import NotifyShipment from '@/components/NotifyShipment.vue';
// 引入退款弹窗组件
import Refund from '@/components/Refund.vue';
// 数据
const data = reactive({
  bool: false,
  showCancelModal: false,
  showCollectModal: false,
  showNotifyShipment: false,
  showRefund: false,
  payMethod: ''
})

// 显示取消订单弹窗
function cancelOrder() {
  data.showCancelModal = true
}
// 确认取消订单
const cancelOrderConfirm = () => {
  data.showCancelModal = false
  uni.showToast({
    title: '取消成功',
    icon: 'none'
  })
}
// 显示确认收货弹窗
function collectOrder() {
  data.showCollectModal = true
}
// 订单确认收货
const collectConfirm = () => {
  data.showCollectModal = false
  uni.showToast({
    title: '取消成功',
    icon: 'none'
  })
}
// 显示通知发货
function showNotifyShipment() {
  data.showNotifyShipment = true
}
// 修改地址
function editAddress() {
  uni.navigateTo({
    url: '/subPackage/my/address/index'
  })
}
// 显示售后退款弹窗
function showRefundPopup() {
  data.showRefund = true
}
// 前往订单评价页面
function goToEvaluate() {
  uni.navigateTo({
    url: '/subPackage/my/order/evaluate'
  })
}
</script>

<template>
  <view class="order-detail-page">
    <!-- 地址信息 -->
    <view class="address-box">
      <image style="width: 40rpx;height: 40rpx;" src="/static/images/icons/location.png" mode="scaleToFill" />
      <view class="info-box">
        <view class="info">
          <text class="name">张三</text>
          <text class="phone-no">13275692915</text>
        </view>
        <view class="address">
          <text>南京市浦口区江浦街道明发新城中心办公楼1栋30楼3005</text>
        </view>
      </view>
    </view>
    <!-- 下单信息 -->
    <view class="place-order-info">
      <view class="head">
        <text class="order-no">334374658690785764</text>
        <text class="status">待付款</text>
      </view>
      <!-- 商品列表 -->
      <view class="commodity--list">
        <view class="commodity-item" v-for="item in (3 == 3 && !data.bool ? 3 : 5)" :key="item">
          <view class="left">
            <view class="img-box">
              <image style="width: 100rpx; height:100rpx;" src="https://cdn.uviewui.com/uview/goods/1.jpg"
                mode="scaleToFill" />
            </view>
            <view class="info">
              <view class="name">商品名称</view>
              <view class="sku">规格：8瓶</view>
            </view>
          </view>
          <view class="right">
            <view class="price">¥200.00</view>
            <view class="num-box">
              <up-icon name="close" color="#000000" size="12"></up-icon>
              <text class="num">1</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 展示更多 -->
      <view v-if="10 > 3" class="showMore" @click="data.bool = !data.bool">
        <text>{{ !bool ? '展开' : '收起' }}</text>
        <up-icon :name="!data.bool ? 'arrow-down' : 'arrow-up'" color="#000" size="16"></up-icon>
      </view>
    </view>
    <!-- 金额信息 -->
    <view class="amount-info">
      <view class="item">
        <text class="label">商品金额</text>
        <text class="value">¥200.00</text>
      </view>
      <view class="item">
        <text class="label">优惠券</text>
        <text class="value" style="color:#FF3141">-¥0.00</text>
      </view>
      <view class="item">
        <text class="label">运费</text>
        <text class="value">¥9.90</text>
      </view>
      <view class="item line">
        <text class="label">实付款</text>
        <text class="value" style="font-weight: 500;">¥200.00</text>
      </view>
    </view>
    <!-- 选择支付方式模块  未支付展示-->
    <view class="pay-way-box">
      <view class="head">支付方式</view>
      <view class="pay-way-list">
        <up-radio-group v-model="data.payMethod" placement="column" inactiveColor="#666666" activeColor="#FFC870">
          <!-- 水卡支付 -->
          <view class="pay-way-item">
            <view class="left">
              <image style="width: 50rpx; height:50rpx;" src="/static/images/icons/pay_method1.png"
                mode="scaleToFill" />
              <text>会员水卡（余额：¥500.00）</text>
            </view>
            <up-radio label="" :name="1">
            </up-radio>
          </view>
          <!-- 微信支付  未支付-->
          <view class="pay-way-item">
            <view class="left">
              <image style="width: 50rpx; height:50rpx;" src="/static/images/icons/pay_method2.png"
                mode="scaleToFill" />
              <text>微信支付</text>
            </view>
            <up-radio label="" :name="2">
            </up-radio>
          </view>
        </up-radio-group>
      </view>
    </view>
    <!-- 非未支付展示 -->
    <template>
      <view class="order-info">
        <view class="item">
          <text class="label">订单编号</text>
          <text class="value">12737847576489839392</text>
        </view>
        <view class="item">
          <text class="label">下单时间</text>
          <text class="value">2320-12-30 09:00</text>
        </view>
        <view class="item">
          <text class="label">支付时间</text>
          <text class="value">2320-12-30 09:00</text>
        </view>
      </view>
      <!-- 选择支付方式模块  未支付展示-->
      <view class="pay-way-box-show">
        <view class="head">支付方式</view>
        <view class="pay-way-list">
          <!-- 水卡支付 -->
          <view v-if="false" class="pay-way-item">
            <view class="left">
              <image style="width: 50rpx; height:50rpx;" src="/static/images/icons/pay_method1.png"
                mode="scaleToFill" />
              <text>会员水卡</text>
            </view>
          </view>
          <!-- 微信支付  未支付-->
          <view class="pay-way-item">
            <view class="left">
              <image style="width: 50rpx; height:50rpx;" src="/static/images/icons/pay_method2.png"
                mode="scaleToFill" />
              <text>微信支付</text>
            </view>
          </view>
        </view>
      </view>
    </template>
    <!-- 底部栏 -->
    <view class="bottom-bar">
      <view class="content" :class="false ? 'way-pay' : 'other'">
        <template v-if="false">
          <view class="left">
            <text class="label">合计：</text>
            <text class="amount">¥980.00</text>
          </view>
          <view class="right">
            <up-button v-if="true" text="取消订单" type="primary" :plain="true" @click="cancelOrder"></up-button>
            <up-button v-if="true" text="立即支付" type="primary"></up-button>
          </view>
        </template>
        <template v-else>
          <up-button v-if="false" text="通知发货" type="primary" :plain="true" @click="showNotifyShipment"></up-button>
          <up-button v-if="true" text="售后\退款" type="primary" :plain="true" @click="showRefundPopup"></up-button>
          <up-button v-if="true" text="修改地址" type="primary" :plain="true" @click="editAddress"></up-button>
          <up-button v-if="false" text="确认收货" type="primary" :plain="true" @click="collectOrder"></up-button>
          <up-button v-if="false" text="立即评价" type="primary" :plain="true" @click="goToEvaluate"></up-button>
        </template>
      </view>
    </view>
    <!-- 取消订单确认弹窗 -->
    <up-modal :show="data.showCancelModal" width="540rpx" title="提示" content='确定取消当前订单？' confirmText="取消"
      cancelText="再想想" :showCancelButton="true" cancelColor="#333333" confirmColor="#FF4D4D" :asyncClose="true"
      contentTextAlign="center" @cancel="data.showCancelModal = false" @confirm="cancelOrderConfirm"></up-modal>
    <!-- 确认收货弹窗 -->
    <up-modal :show="data.showCollectModal" width="540rpx" title="提示" content='确认收货？' confirmText="确认" cancelText="取消"
      :showCancelButton="true" cancelColor="#333333" confirmColor="#FFA618" :asyncClose="true" contentTextAlign="center"
      @cancel="data.showCollectModal = false" @confirm="collectConfirm"></up-modal>

    <!-- 提货弹窗 -->
    <NotifyShipment :show="data.showNotifyShipment" type="1" @close="data.showNotifyShipment = false" />
    <!-- 售后退款弹窗 -->
    <Refund :show="data.showRefund" @close="data.showRefund = false" />
  </view>
</template>

<style lang="scss" scoped>
.order-detail-page {
  box-sizing: border-box;
  padding: 40rpx 30rpx;
  padding-bottom: 200rpx;
  min-height: 100vh;
  background: #F9F9F9;

  // 地址盒子
  & .address-box {
    display: flex;
    align-items: center;
    padding: 20rpx 36rpx;
    padding-right: 42rpx;
    background: #FFFFFF;
    border-radius: 10rpx;

    & .info-box {
      margin-left: 32rpx;
      width: 540rpx;

      & .info {
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;

        & .phone-no {
          margin-left: 16rpx;

        }
      }

      & .address {
        margin-top: 10rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #9B9B9B;
      }
    }
  }

  // 下单信息
  & .place-order-info {
    margin-top: 24rpx;
    padding: 0 30rpx;
    background: #FFFFFF;
    border-radius: 10rpx;

    // 头部
    & .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;
      border-bottom: 2rpx solid #F9F9F9;

      & .order-no {
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
      }

      & .status {
        font-weight: 500;
        font-size: 26rpx;
        color: #FF9F18;
      }
    }

    // 商品列表
    & .commodity--list {

      & .commodity-item {
        margin-top: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        & .left {
          display: flex;

          & .img-box {
            width: 100rpx;
            height: 100rpx;
            border-radius: 10rpx;
            overflow: hidden;
          }

          & .info {
            margin-left: 20rpx;

            & .name {
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
            }

            & .sku {
              margin-top: 10rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
            }
          }
        }

        & .right {

          & .price {
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
          }

          & .num-box {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 10rpx;
            line-height: 24rpx;

            &::v-deep .u-icon {
              margin-top: 5rpx;
            }

            & text {
              padding-left: 6rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
            }
          }
        }
      }
    }

    // 展开更多
    & .showMore {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;
      padding-bottom: 30rpx;

      & text {
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
      }

      &::v-deep .u-icon {
        margin-left: 10rpx;
      }
    }
  }

  // 金额信息
  & .amount-info {
    margin-top: 24rpx;
    padding: 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx;

    & .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30rpx;

      &.line {
        padding-top: 30rpx;
        margin-bottom: 0;
        border-top: 2rpx solid #F9F9F9;
      }

      & .label {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
      }

      & .value {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
      }
    }
  }

  // 支付方式(选择)
  & .pay-way-box {
    margin-top: 20rpx;
    padding: 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx;

    & .head {
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
    }

    & .pay-way-list {
      & .pay-way-item {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        & .left {
          display: flex;
          align-items: center;

          & text {
            padding-left: 20rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
          }
        }
      }
    }
  }

  // 订单信息
  & .order-info {
    margin-top: 24rpx;
    padding: 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx;

    & .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30rpx;

      & .label {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
      }

      & .value {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
      }
    }
  }

  // 支付方式(展示)
  & .pay-way-box-show {
    margin-top: 20rpx;
    padding: 30rpx;
    background: #FFFFFF;
    border-radius: 16rpx;

    & .head {
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
    }

    & .pay-way-list {
      & .pay-way-item {
        margin-top: 20rpx;
        display: flex;
        align-items: center;

        & .left {
          display: flex;
          align-items: center;

          & text {
            padding-left: 20rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
          }
        }
      }
    }
  }

  // 底部栏
  & .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 750rpx;
    height: 158rpx;
    background: #000000;

    & .content {
      display: flex;
      align-items: center;
      padding-top: 32rpx;

      &.way-pay {
        padding-left: 32rpx;
        padding-right: 40rpx;
        justify-content: space-between;

        & .left {
          font-weight: 500;
          color: #FFFFFF;

          & .label {
            font-size: 24rpx;
          }

          & .amount {
            font-size: 36rpx;
          }
        }

        & .right {
          display: flex;
          align-items: center;

          &::v-deep .u-button {
            width: 190rpx;
            height: 70rpx;
            font-weight: 500;
            font-size: 32rpx;
            border-radius: 10rpx;

            &:first-child {
              color: #FFC870;
              background-color: transparent;
              border: 2rpx solid #FFC870;
            }

            &:last-child {
              margin-left: 20rpx;
              border: none;
              color: #FFFFFF;
              background: #FFA109;
            }
          }
        }
      }

      &.other {
        justify-content: flex-end;
        padding-right: 40rpx;

        &::v-deep .u-button {
          width: 190rpx;
          height: 70rpx;
          margin: 0;
          margin-left: 20rpx;
          color: #FFC870;
          background-color: transparent;
          border: 2rpx solid #FFC870;
          font-weight: 500;
          font-size: 32rpx;
          border-radius: 10rpx;
        }
      }
    }
  }
}
</style>